<template>
	<div class="goods h100 bg-w">
		<div class="header pos-r">
			<div class="header-video w100">
				<video :src="goods.shortUrl" controls="controls" class="w100 header-video"  :poster="`${goods.shortUrl}?vframe/jpg/offset/1/w/678/h/380`"></video>
			</div>
			<div class="header-tit">
				{{goods.shortName}}
			</div>
		</div>
		<div class="info-wrap">
			<div class="info-wrap-head">
				视频简介
			</div>
			<div class="info-wrap-info" v-html="goods.shortDesc">
				
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getShortInfo
	} from '@/api/permission.js'
	import {
		Tag,
		Col,
		Icon,
		Cell,
		CellGroup,
		Swipe,
		Toast,
		SwipeItem,
		GoodsAction,
		GoodsActionIcon,
		GoodsActionButton
	} from 'vant';

	export default {
		components: {
			[Tag.name]: Tag,
			[Col.name]: Col,
			[Icon.name]: Icon,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Swipe.name]: Swipe,
			[SwipeItem.name]: SwipeItem,
			[GoodsAction.name]: GoodsAction,
			[GoodsActionIcon.name]: GoodsActionIcon,
			[GoodsActionButton.name]: GoodsActionButton
		},

		data() {
			return {
				goods: {
					
				}
			};
		},
		mounted() {
			let self = this
			if (self.$route.query.id) {
				getShortInfo({
					id: self.$route.query.id
				}).then(res => {
					self.goods = res
				})
			}
		},
		methods: {
			formatPrice() {
				return '¥' + (this.goods.price / 100).toFixed(2);
			},

			onClickCart() {
				this.$router.push('cart');
			},

			sorry() {
				Toast('暂无后续逻辑~');
			}
		}
	};
</script>

<style lang="less">
	.header {
		border: 1px solid #ebedf0;
		&-video {
			width: 100%;
			height: 205px;
			overflow: hidden;
		}

		&-tit {
			padding: 10.5px 16px;
			line-height: 25px;
			font-size: 18px;
			font-weight: 500
		}
	}
	.info-wrap-head{
		position: relative;
		overflow-x: hidden;
		font-size: 18px;
		line-height:25px;
		font-weight:bold;
		padding-left: 14px;
		margin-bottom: 12.5px;
		&:before{
		  	content: '';
			width:0;
			height: 17px;
			border-left:3px solid #FF5E6AFF;
			position:absolute ;
			left:0;
			top:4px;
			z-index: 88;
		}
	}
	.info-wrap{
		padding:15px 16px;
		color:#666666FF;
		font-size: 16px;
	}
	.info-wrap-info{
		overflow-x: hidden;
		img{
			width: 100%;
		}
	}
</style>
